import React from "react";

// react类组件
class Component extends React.Component {
  // 定义状态
  // 1.声明用来控制input value的组件状态
  state = {
    message: 'this is a message'
  }

  inputChange = (e) => {

    // 4. 将最新值替换组件中状态的属性值
    this.setState({
      message: e.target.value
    })
  }

  // 渲染ui结构
  render() {
    return (
      <>
        {/* 2. 给input 框的value属性绑定 组件 状态 */}
        {/* 3. 给input 框绑定一个change事件 为了拿到当前输入框中的数据 */}
        输入框: <input type="text" value={ this.state.message } onChange={ this.inputChange } />
      </>
    )
  }
}

function App() {
  return (
    <div className="App">
      <Component></Component>
    </div>
  );
}

export default App;
